.ShangPinInfo {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &>div {
        width: 100%;

        &.Search {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            margin-bottom: 16px;
        }

        &.Commodity {
            flex: 1;
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;

            &>div {
                width: 20%;
                padding: 8px;

                &>.CommodityDefault {
                    height: 100%;
                    border-radius: 8px;
                    box-shadow: var(--shadow-1-down);
                    cursor: pointer;
                    user-select: none;
                    padding: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    &>div {
                        width: 100%;

                        &:nth-child(1) {
                            flex: 1;
                            width: 100%;
                            overflow: hidden;
                            border-radius: 8px;

                            &>img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }

                        &:nth-child(2) {
                            padding: 8px;

                            &>div:nth-child(1) {
                                font-family: PingFang;
                                font-weight: 600;
                                font-size: 24px;
                                color: #082400;
                            }

                            &>div:nth-child(2) {
                                display: flex;
                                align-items: center;
                                justify-content: flex-start;

                                &>div {
                                    font-family: PingFang;
                                    font-weight: 600;
                                    font-size: 16px;
                                    color: #FFFFFF;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 2px 16px;
                                    margin-right: 8px;
                                    border-radius: 50px;
                                }
                            }

                            &>div:nth-child(3) {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                &>div:nth-child(1) {
                                    font-family: DIN;
                                    font-weight: 600;
                                    font-size: 24px;
                                    color: #082400;

                                    &>span {
                                        font-size: 16px;
                                    }
                                }

                                &>div:nth-child(2) {
                                    font-family: DIN;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #8C8C8C;
                                }
                            }

                            &>div:nth-child(4) {
                                text-align: right;
                            }

                        }
                    }



                }
            }
        }

        &.Pagination {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}